<template>
	<div class="app-container">
		<el-main class="bg-ghostgray">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :lg="8">
					<!-- <div class="margin-bottom-sm">
						<CompanyNotice />
					</div> -->
					<div class="margin-bottom-sm">
						<WorkPlan />
					</div>
					<div class="margin-bottom-sm">
						<OwnCalendar />
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="16">
					<!-- <div class="margin-bottom-sm">
						<Pics />
					</div> -->
					<div class="margin-bottom-sm" v-if="device != 'mobile'">
						<QuickGroup />
					</div>
					<div class="margin-bottom-sm">
						<ToHandleList />
					</div>
				</el-col>
				<!-- <el-col :xs="24" :sm="24" :lg="24">
					<div class="margin-bottom-sm">
						<StatisticsCenter />
					</div>
				</el-col> -->
			</el-row>
		</el-main>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import QuickGroup from './components/QuickGroup'
	import CompanyNotice from './components/CompanyNotice'
	import WorkPlan from './components/WorkPlan'
	import OwnCalendar from './components/OwnCalendar'
	import Pics from './components/Pics'
	import ToHandleList from './components/ToHandleList'
	import StatisticsCenter from './components/StatisticsCenter'
	export default {
		name: 'Dashboard',
		components: {
			OwnCalendar,
			QuickGroup,
			CompanyNotice,
			WorkPlan,
			Pics,
			ToHandleList,
			StatisticsCenter
		},
		data() {
			return {
				
			}
		},
		computed: {
			...mapGetters(["device"])
		},
		mounted() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.quick-group-box {
	
		.title-box {
			margin: 1px 0 0;
			padding: 2px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			padding: 5px 5px;
			margin: 0 20px 10px 10px;
	
			.content {
				font-size: 18px;
				font-weight: normal;
			}
	
			.to {
				font-size: 15px;
			}
		}
	}
	
</style>
